<template>
  <transition name="fade">
    <div class="report_form" v-drag>
      <div class="off">
        <off-btn @off="$emit('offReport')"></off-btn>
      </div>
      <div class="info">
        <p class="text">
          举报类型：
          <span>{{type}}</span>
        </p>
        <p class="text">
          举报内容：
          <span v-html="content"></span>
        </p>
      </div>
      <div class="cause">
        <p class="text">举报原因：
        <ul>
          <li :class="{active:cause==item}" v-for="(item,index) in reportCause" :key="index">
            <span>{{item+'：'}}</span>
            <input type="radio" v-model="cause" name="cause" :value="item">
          </li>
        </ul>
        </p>
      </div>
      <textarea v-model="moveCause" v-show="cause=='其他'" maxlength="20" placeholder="举报原因(最多20字)"></textarea>
      <button @click="submitReport">提交</button>
    </div>
  </transition>
</template>

<script>
import { mapActions } from 'vuex'
import offBtn from '../info/offBtn.vue'
export default {
  name: 'Report',

  data() {
    return {
      reportCause: ['涉嫌诈骗','内容低俗','引人不适','其他'], // 举报类型
      cause: '', // 切换举报原因
      moveCause:'', // 其他举报原因
      offIcon: '#icon-guanbi' // 关闭图标
    };
  },

  props:{
    reportObj: Object
  },

  computed: {
    // 返回举报类型
    type(){
      return this.reportObj ? (this.reportObj.commentid ? '评论' : '话题') : ''
    },
    // 返回举报内容
    content(){
      return this.reportObj ? this.reportObj.content : ''
    }
  },

  mounted() {
   
  },

  methods: {
    // 提交举报信息
    submitReport(){
      if(this.cause.trim() == ''){
        this.showHint({title:'请选择举报原因',isFlag:false})
        return
      }else if(!this.$store.state.isLogin){
        this.showHint({title:'请先登陆',isFlag:false})
        return
      }else if(this.cause == '其他' && this.moveCause.trim()==''){
        this.showHint({title:'请描述举报原因',isFlag:false})
        return
      }
      let cause = this.cause == '其他' ? this.moveCause : this.cause
      let id = this.type == '话题' ? this.reportObj.topicsid : this.reportObj.commentid
      this.$api.submitReport({
        cause,id,type: this.type
      }).then(res => {
        if(res instanceof Object){
          this.showHint({title:'举报成功!',isFlag:true})
          this.$emit('offReport')
        }else{
          this.showHint({title:res,isFlag:false})
        }
      })
    },
    ...mapActions(['showHint'])
  },
  components: {
    offBtn
  }
};
</script>

<style scoped>
.report_form{
  width: 300px;
  background-color: white;
  border: 1px solid gray;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;
  box-shadow: 0 0 4px gray;
  padding: 10px;
  font-size: 0.8rem;
}
.cause{
  display: flex;
  width: 100%;
}
.report_form .text{
  width: 100%;
  margin: 10px 0;
}
.text span{
  color: gray;
}
.cause ul{
  display: flex;
  flex-wrap: wrap;
}
.cause ul li{
  display: flex;
  align-items: flex-end;
  margin-right:10px;
  color: gray;
}
.cause .active{
  color: black;
}
.cause li input{
  cursor: pointer;
}
.report_form textarea{
  width: 100%;
  outline: none;
  margin-top: 10px;
  border: 1px solid gray;
  padding: 4px;
  resize: none;
}
.report_form button{
  width: 80px;
  height: 30px;
  background-color: green;
  opacity: .7;
  color: white;
  cursor: pointer;
  display: block;
  margin: 0px auto;
  transition: all .3s;
  border-radius: 3px;
}
.report_form button:hover{
  opacity: 1;
}
.off{
  position: absolute;
  top: 5px;
  right: 5px;
}
</style>